
export const loadImage = (url, call) => {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const img = new Image();
  img.onload = () => {
    const height = (canvas.height = Math.min(152, img.height));
    const aspect = img.width / img.height;
    const width = (canvas.width = Math.round(height * aspect));
    ctx.drawImage(img, 0, 0, width, height);
    const imgData = ctx.getImageData(0, 0, width, height);
    call(imgData.data, width, height);
  };
  img.src = url;
};

export const defaultOption = {
  tooltip:{},
  visualMap: {
    show: false,
    min: 20,
    max: 256,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  backgroundColor: '#fff',
  xAxis3D: {
    type: "value",
  },
  yAxis3D: {
    type: "value",
  },
  zAxis3D: {
    type: "value",
  },
  // grid3D: {
  //   show: false,
  //   backgroundColor: "#000",
  //   boxWidth: 200,
  //   boxDepth: 100,
  //   boxHeight: 20,
  //   viewControl: {
  //     projection: "perspective",
  //     alpha: 45,
  //     beta: -45,
  //     damping: 0.9,
  //     distance: 60,
  //   },
  //   light: {
  //     main: {
  //       intensity: 0.5,
  //       shadow: true,
  //     },
  //     ambient: {
  //       intensity: 0.3,
  //     },
  //   },
  // },
  grid3D: {
    viewControl: { alpha: 20, beta: -30 },
    postEffect: { enable: true, SSAO: { enable: true } },
    boxDepth: 120,
    light: { main: { shadow: true, intensity: 2 } },
  },
  series: [
    {
      type: "bar3D",
      barSize: 1,
      shading: "lambert",
      // realisticMaterial: {
      //   roughness: 0.53,
      //   metalness: 0.51,
      // },
      label: {
        fontSize: 16,
        borderWidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
          color: "#900",
        },
        itemStyle: {
          color: "#900",
        },
      },
    },
  ],
};

export const updateOption = (data, width, height,ops = {}) => {
  const s = 4;
  const max = data.length / 4;
  const d = [];
  for(let i = 0;i < max;i++){
    const x = i % width;
    const y = height - Math.floor(i / width)
    const r = data[i * s];
    const g = data[i * s + 1];
    const b = data[i * s + 2];
    // let lum = (0.2125 * r + 0.7154 * g + 0.0721 * b);
    let lum = (r + g + b) / 3 
    // lum = lum;
    // const v = (lum - 125) * 0.25 + Math.random() * 50;
    const v = lum ;
    const t = r + g + b;
    // t > 20 && d.push({name:i + 'rgb' + r + '.' + g + '.' + b,value:[x,y,v],itemStyle:{color:`rgb(${[r,g,b].join(',')})`}})
    t > 20 && d.push({name:i + 'rgb' + r + '.' + g + '.' + b,value:[x,y,v]})
  }

  return {
    series: [
      {data: d},
    ],
  };
};
